<template>
	<!-- 内转签收确认页面 -->
	<view class="container">
		<topBar>内转-签收确认</topBar>
		<view class="content">
			<view class="cart-lines">
				<view class="cart-info">
					<view class="cart-info-content">
						<view class="cart-types">
							<Button2 class="btn">{{info.energyType}}</Button2>
							<Button2 class="btn">{{info.directory}}</Button2>
							<Button2 class="btn danger">内转车</Button2>
						</view>
						<view class="cart-code">
							<view class="code-item">
								<input type="text" v-model="nowCartCode[0]" />
							</view>
							<view class="code-item">
								<input type="text" v-model="nowCartCode[1]" />
							</view>
							<view class="code-separator">
								·
							</view>
							<block v-for="(item,index) in nowCartCode" :key="index">
								<view class="code-item" v-if="index > 1">
									<input type="text" v-model="nowCartCode[index]" />
								</view>

							</block>

						</view>
						<view class="cart-type">
							新能源
						</view>
					</view>
				</view>
				<view class="line">
					<view class="title">
						运企名称
					</view>
					<view class="val">
						{{info.transportCompanyName}}
					</view>
				</view>

				<view class="line">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>签收类型</text>
					</view>
					<view class="val">
						<Button1 v-for="btn in signTypeList" :key="btn.id" @click="changeSignType(btn.id)" class="btn "
							:class="formData.fullFlag != btn.id && 'no-active-btn'">{{btn.name}}</Button1>
					</view>
				</view>
				<view class="line" v-if="formData.fullFlag == 0">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>扣方方量</text>
					</view>
					<view class="val deduction-amount">
						-
						<input class="amount-input" type="number" v-model="formData.volumeReduce"
							@blur="changeVolumeReduce" placeholder-style="color:#EB4F51;" placeholder="请输入" />
						方
					</view>
				</view>
				<view class="line">
					<view class="title">
						实际方量
					</view>
					<view class="val">
						{{formData.actualVolume}}方
					</view>
				</view>
				<view class="line" @click="showMaterialTypePopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>物料类型</text>
					</view>
					<view class="val" :class="formData.rockName == '' &&'no-check'">
						<text>{{formData.rockName || '请选择'}}</text>
						<uni-icons type="right" size="28"
							:color="formData.rockName == ''?'#989DA5':'#0E1624'"></uni-icons>
					</view>
				</view>
				<view class=" line cart-imgs">
					<view class="left">
						<view class="title">
							<image src="/static/img/common/required.png" class="required-icon"></image>
							<text>车头照片</text>
						</view>
						<view class="upload-area">
							<view class="upload-box">
								<view class="upload" @click="uploadMaterialImg('carImages')">
									<image src="/static/img/common/upload.png" class="icon"></image>
									<text>点击上传</text>
								</view>
								<view class="upload-tip">
									最多上传1张
								</view>
							</view>
							<view class="cart-img" v-if="formData.carImages">
								<image :src="formData.carImages[0]" mode="widthFix" class="img"></image>
								<view class="img-title">
									<!-- 物料照片01.jpg -->
								</view>
							</view>
						</view>
					</view>
					<view class="upload-example">
						<image src="/static/img/consumption/upload-example.png" class="img"></image>
						<view class="example-tip">
							上传示例
						</view>
					</view>
				</view>
				<view class="cart-imgs line  material-imgs">
					<view class="left">
						<view class="title">
							<!-- <image src="/static/img/common/required.png" class="required-icon"></image> -->
							<text>物料照片</text>
						</view>
						<view class="upload-area">
							<view class="upload-box" @click="uploadMaterialImg('rockImages')">
								<view class="upload">
									<image src="/static/img/common/camera.png" class="icon"></image>
									<text>拍照上传</text>
								</view>
								<view class="upload-tip">
									最多上传6张
								</view>
							</view>
							<view class="show-img" v-if="formData.rockImages && formData.rockImages.length">
								<view class="imgs">
									<image v-if="formData.rockImages[0]" :src="formData.rockImages[0]" mode="widthFix"
										class="img"></image>
									<image v-if="formData.rockImages[1]" :src="formData.rockImages[1]" mode="widthFix"
										class="img"></image>
								</view>
								<view class="moreImg" @click="isShowMoreImgs=true">
									点击查看更多
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<BottomBtn @click="saveReceiving">提交</BottomBtn>
		<!-- 物料类型弹窗 -->
		<MaterialTypePopup v-if="isShowMaterialTypePopup" :type-list="muckTypeList"
			@saveMaterialType="saveMaterialType" />
		<!-- 预览图片 -->
		<PreviewImgs :img-list="formData.rockImages" v-if="isShowMoreImgs" @closePreview="closeMoreImgs" />
		<!-- 提示弹窗 -->
		<messageTip ref="myMessage" />

	</view>

</template>

<script setup lang="ts">
	import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import Button1 from '@/components/button1/button1.vue';
	import Button2 from '@/components/button2/button2.vue';
	import MaterialTypePopup from '@/components/consumption/materialTypePopup/materialTypePopup.vue'
	import PreviewImgs from '@/components/previewImgs/previewImgs.vue';
	import { computed, reactive, ref, watchEffect } from 'vue';
	import * as consumptionApi from '@/api/consumption/consumption.js';
	import { useConsumptionStore } from '@/stroes';

	// 消息提示
	const myMessage = ref()
	// 消纳仓库
	const consumptionStore = useConsumptionStore()
	const info = consumptionStore.info
	// console.log('info', info);
	const formData = reactive({
		id: info.orderId,
		// 是否满载  0未满载 1已满载
		fullFlag: info.fullFlag || '1',
		// 实际装载
		actualLoad: '',
		// 实际方量
		actualVolume: (Number(info.volume) - info.volumeReduce) || null,
		// 扣方方量
		volumeReduce: info.volumeReduce || null,
		// 扣方原因
		reduceReason: info.reduceReason || '',
		// 签收状态 1处理中2已签收3退回4其他
		orderStatus: '2',
		//  异常签收原因
		orderReason: '',
		// 物料类型名字
		rockName: info.rockName || '',
		// 物料类型id
		rockType: info.rockType || '',
		// 车辆照片
		carImages: info.carImages || [],
		// 物料照片
		rockImages: info.rockImages || []
	})
	// 车牌号
	const nowCartCode = computed(() => {
		if (info.carNumber) {
			return info.carNumber.split('')
		} else {
			return ['', '', '', '', '', '', '', '']
		}
	})
	// 签收类型
	const signTypeList = [{ name: '整车签收', id: '1' }, { name: '扣方签收', id: '0' }]
	// 改变签收类型
	const changeSignType = (id) => {
		formData.fullFlag = id
	}
	// 当前物料类型列表
	const muckTypeList = ref([])
	// 是否显示物料类型弹窗
	const isShowMaterialTypePopup = ref(false)
	// 显示物料类型弹窗
	const showMaterialTypePopup = () => {
		isShowMaterialTypePopup.value = true
	}
	consumptionApi.muckTypeAll().then(res => {
		if (res.data.code == 0) {
			muckTypeList.value = res.data.data
			if (formData.rockName) {
				let item = muckTypeList.value.find(item => item.name == formData.rockName);
				formData.rockType = item && item.id
			}
		} else {
			console.log("失败")
		}
	})
	// 保存物料类型
	const saveMaterialType = (item) => {
		if (item) {

			formData.rockType = item.id
			formData.rockName = item.name
		}
		isShowMaterialTypePopup.value = false
	}
	// 是否显示更多图片
	const isShowMoreImgs = ref(false)

	// 关闭查看更多图片
	const closeMoreImgs = () => {
		isShowMoreImgs.value = false
	}

	// 修改减扣方量
	const changeVolumeReduce = (data) => {
		let volume = Number(info.volume) - data.detail.value

		if (volume > 0) {
			formData.actualVolume = volume
			// formData.volumeReduce = data.detail.value

		} else {
			formData.volumeReduce = 0
			myMessage.value.open('error', '减扣方量已大于实际方量')
		}
		// console.log(num, '999999999');
	}

	// 上传车辆照片
	const uploadMaterialImg = (key) => {
		uni.chooseImage({
			count: 6,
			success: async (res) => {
				uni.showLoading({
					title: '正在上传中'
				})
				for (const file of res.tempFilePaths) {
					let res2 = await consumptionApi.uploadMaterialImg({ file })
					if (res2.data) {
						let data = JSON.parse(res2.data)
						formData[key].push(data.data.ossUrl)
					}
				}
				uni.hideLoading()

			}
		})
	}
	// 保存新增收料
	let startSave = true
	const saveReceiving = () => {
		if (startSave) {
			startSave = false
			consumptionApi.saveSign(formData).then(res => {
				if (res.data && res.data.code == 0) {
					myMessage.value.open('success', '签收完成')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1000)
				} else {
					console.log('签收失败', res);
					myMessage.value.open('error', '签收失败，请重试')
				}
				startSave = true
			})
		}

	}
</script>

<style scoped lang="scss">
	.content {
		margin: 32rpx;
		width: 686rpx;
		// height: 1140rpx;
		padding-bottom: 42rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;

		.cart-info {
			padding: 18rpx;
			padding-left: 20rpx;

			.cart-types {
				.btn {
					margin-right: 8rpx;
				}
			}

			.cart-code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16rpx 0rpx;
				font-size: 40rpx;
				font-weight: bold;

				.code-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 68rpx;
					height: 80rpx;
					// line-height: 80rpx;
					text-align: center;
					background: #EFF6FE;
					border-radius: 8rpx;
					overflow: hidden;


				}
			}

			.cart-type {
				font-size: 24rpx;
				text-align: right;
				color: #55CDA8;
			}
		}

		.cart-lines {
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-top: 2rpx solid rgba(156, 159, 163, .1);
				border-bottom: 0rpx;

				.left {
					padding: 0;
				}

				.title {
					width: 30%;
					display: flex;
					align-items: center;


				}

				.val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// font-weight: bold;

					.amount-input {
						margin: 0rpx 20rpx;
						width: 100rpx;
						font-size: 28rpx;
					}


					&.deduction-amount {
						color: #EB4F51;
					}

					&.square {
						color: #EB4F51;
					}

					&.no-check {
						color: #989DA5;
					}
				}

			}

			.cart-imgs {
				padding: 0rpx;
				display: flex;
				// border-bottom: 2rpx solid rgba(156, 159, 163, 0.1);

				.left {
					flex: 1;
					padding: 32rpx 0rpx 20rpx 24rpx;

					.title {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
					}

					.upload-area {
						display: flex;
						font-size: 20rpx;
						color: $info-color;
						text-align: center;

						.upload-box {
							margin-right: 16rpx;

							.upload {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								margin-bottom: 10rpx;
								width: 135rpx;
								height: 136rpx;
								font-size: 24rpx;
								color: $primary-color;
								border: 2rpx dashed #9C9FA3;
								border-radius: 8rpx;

								.icon {
									width: 40rpx;
									height: 40rpx;
								}
							}


						}
					}

					.cart-img {
						margin-right: 16rpx;

						.img {
							margin-bottom: 10rpx;
							width: 208rpx;
							height: 136rpx;
						}
					}

					.show-img {

						.imgs {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							.img {
								margin-right: 20rpx;
								width: 208rpx;
								height: 136rpx;
							}
						}

						.moreImg {
							text-align: left;
							font-size: 30rpx;
							color: $primary-color;
						}
					}
				}

				.upload-example {
					width: 200rpx;
					padding: 70rpx 20rpx 16rpx;
					box-shadow: -4rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
					box-sizing: border-box;

					.img {
						width: 160rpx;
						height: 160rpx;
					}

					.example-tip {
						// margin-top: 10rpx;
						font-size: 20rpx;
						color: $primary-color;
						text-align: center;

					}
				}
			}
		}

		.btn {
			margin-left: 8rpx;

			&.no-active-btn {
				color: $info-color;
				background: rgba(46, 135, 255, 0.1);
			}
		}
	}
</style>